<template>
  <div class="special-apply">
    <div class="special-top">
      当前位置：<el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="item.url" v-for="(item ,index) in breadcrumb" :key="index">{{item.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="gray-line"></div>
    <div class="special-wrapper">
      <div class="special-title">
        <el-icon class="el-icon-guide"></el-icon>
        <span>模板配置</span>
        <div class="default-badge" v-if="is_default">默认</div>
      </div>

      <div class="row-line">
        <div class="row-cell">
          <span class="row-label">模板名称</span>
          <el-input class="row-ipt" v-model="template_title" size="medium" placeholder="请输入模板名称"></el-input>
          <span class="hintStr">*</span>
        </div>
      </div>

      <div class="base-price">
        <span class="row-label">金额配置</span>

        <div class="base-price-cell">
          <div class="base-price-config" v-for="(item,index) in price_config" :key="index">
            <div class="base-price-inline">
              <span>充值金额</span>
              <el-input size="medium" v-model="item.recharge" class="base-price-inline-ipt" type="number">
              </el-input>
              <span>元</span>
            </div>
            <div class="base-price-inline">
              <span>赠送金额</span>
              <el-input size="medium" v-model="item.give" class="base-price-inline-ipt" type="number">
              </el-input>
              <span>元</span>
            </div>
            <i @click="handlePlusItem" v-if="price_config.length==index+1" class="el-icon-circle-plus icon-plus"> </i>
            <i @click="handleRemoveItem(index)" v-else class="el-icon-remove icon-plus"></i>
          </div>
        </div>
      </div>

      <div class="special-title">
        <el-icon class="el-icon-date"></el-icon>
        <span>打水配置</span>
      </div>

      <div class="row-line">
        <div class="row-cell">
          <span class="row-label">有效期限</span>
          <el-select size="medium" style="width: 360px;" v-model="currentLimit" class="row-ipt" placeholder="请选择有效期">
            <el-option filterable v-for="item in limits" :value="item.value" :label="item.name" :key="item.value">
            </el-option>
          </el-select>
          <span class="hintStr">*</span>
        </div>

      </div>

      <div class="row-line" v-if="currentLimit==1">
        <div class="row-cell">
          <span class="row-label"></span>
          <template>
            <el-date-picker class="picker-date" value-format="yyyy-MM-dd" v-model="start_time" size="medium" type="date"
              placeholder="选择开始日期">
            </el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd" class="m-l-10 picker-date" v-model="end_time" size="medium"
              type="date" placeholder="选择结束日期">
            </el-date-picker>
          </template>
          <span class="hintStr">*</span>
        </div>
      </div>


      <div class="row-line submit">
        <el-button size="medium" @click="submit" type="primary" class="submit-btn">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  const WECHAT_MAX_NUMBER = 3; //微信打水配置的最大数量
  const ALIPAY_MAX_NUMBER = 3; //支付宝打水配置的最大数量
  const limits = [{
    value: 2,
    name: "永久有效"
  }, {
    value: 1,
    name: "有效时间"
  }];
  export default {
    name: "partnerTemplateAdd",
    data() {
      return {
        breadcrumb: [],
        template_title: "", //模板名称
        limits,
        mode: 1, //1添加 2编辑
        type: 3, // 3代客充值模板
        end_time: "", //有效期之结束时间
        start_time: '', //有效期之开始时间
        currentLimit: 2, //选中的有效期
        template_status: 1, //状态，1：开启，2：关闭
        price_config: [{
          recharge: "",
          give: ""
        }],
        is_default: false,
      }
    },
    created() {
      this.mode = this.$route.query.id ? 2 : 1;
      if (this.mode == 2) {
        this.getTemplate(this.$route.query.id);
      }
      this.breadcrumb = [
        { url: "", name: "经营设置" },
        { url: "/partnerTemplate", name: "代客充值模板" },
        { url: "", name: `${this.mode == 1 ? '添加模板' : '编辑模板'}` }
      ];
    },

    methods: {
      getTemplate(id) {
        this.$post({
          url: "Partner/Village/templateDetail",
          data: {
            template_id: id
          }, success: res => {
            if (res.code == 1000) {
              let data = res.data;
              this.template_status = data.template_status;
              this.currentLimit = parseInt(data.template_type);
              this.start_time = data.template_type == 1 ? this.formatTime(data.start_time) : '';
              this.end_time = data.template_type == 1 ? this.formatTime(data.end_time) : '';
              this.template_title = data.template_title;
              this.price_config = [...Object.values(data.template)];
              this.is_default =  data.is_default == 1 ? true : false;
            } else {
              this.$message.error(res.messsage);
            }
          }, error: e => {
            this.$message.error("网络错误");
          }
        })

      },
      formatTime(str) {
        let result = "";
        if (str.length >= 10) {
          result = str.substring(0, 10);
        }
        return result;
      },
      submit() {
        let template_title = this.template_title;
        if (template_title === "") {
          this.$message.error("请输入模板名称"); return;
        }
        let price_config = this.price_config;
        let template = [];

        //充值金额数组
        let recharge_arr = [];

        for (let i = 0; i < price_config.length; i++) {
          if (price_config[i].recharge === "") {
            this.$message.error(`第${i + 1}项充值金额未配置`); return false;
          }
          if (price_config[i].give === "") {
            this.$message.error(`第${i + 1}项赠送金额未配置`); return false;
          }
          template[`money_${parseInt(i) + 1}`] = {
            recharge: price_config[i].recharge,
            give: price_config[i].give
          }

          //充值金额数组
          recharge_arr[i] = price_config[i].recharge;

        }

        function isRepeat(arr) {
          let isRepeat = false;
          let hash = {};
          for(let i in arr) {
            if (hash[arr[i]]) {
              isRepeat = arr[i];
              return isRepeat;
            }
            hash[arr[i]] = true;
          }
          return isRepeat;
        }

        if (isRepeat(recharge_arr)) {
          this.$message.error(`金额重复`); return false;
        }

        if (this.currentLimit == 1) {
          if (this.start_time == "") {
            this.$message.error("请选择开始时间");
            return;
          }
          if (this.end_time == "") {
            this.$message.error("请选择结束时间");
            return;
          }
          if (new Date(this.start_time).getTime() > new Date(this.end_time).getTime()) {
            this.$message.error("结束时间不能小于开始时间");
            return false;
          }
        }
        const data = {
          template: { ...template },
          template_species: this.type,
          template_type: this.currentLimit,
          template_title,
          start_time: this.currentLimit == 1 ? this.start_time : '',
          end_time: this.currentLimit == 1 ? this.end_time : '',
          template_status: this.template_status,
        }
        let url = "Partner/Village/addTemplate";
        if (this.mode == 2) {
          url = "Partner/Village/editTemplate";
          Object.assign(data, {
            id: this.$route.query.id
          })
        }
        const loading = this.$loading({
          lock: true,
          text: '数据处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$post({
          url,
          data,
          success: res => {
            loading.close();
            if (res.code == 1000) {
              this.$message.success(res.message);
              setTimeout(() => {
                this.$router.push({ path: "/partnerTemplate" });
              }, 2000)
            } else {
              this.$message.error(res.message);
            }
          }, error: err => {
            loading.close();
            this.$message.error(`网络错误`);
          }
        })
      },

      handlePlusItem() {
        this.price_config.push({
          recharge: "",
          give: "",
        });
      },

      handleRemoveItem(index) {
        this.price_config.splice(index, 1)
      },
    },
  }
</script>
<style scoped>
  .hintStr {
    padding-left: 10px;
    color: #FF6565;
  }

  .special-top {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 24px;
  }

  .gray-line {
    height: 12px;
    width: 100%;
    background: #fafafa;
  }

  .special-title {
    padding: 35px 0 0 25px;
    color: #2C5586;
    display: inline-block;
    position: relative;
  }

  .row-line {
    display: flex;
    align-items: center;
    width: 800px;
    justify-content: space-between;
    padding-left: 31px;
  }

  .row-cell {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .row-label {
    flex-shrink: 0;
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
  }

  .row-ipt {
    width: 360px;
  }

  .base-price {
    padding-left: 31px;
    margin-top: 20px;
  }

  .question-icon {
    cursor: pointer;
    color: #FF6565;
  }

  .base-price-cell {
    display: flex;
    padding-left: 10px;
    margin-top: 10px;
    flex-direction: column;
    border-radius: 10px;
    background: #F2F2F2;
    width: 460px;
    box-sizing: border-box;
    padding-bottom: 12px;
  }

  .base-price-config {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 12px;
  }

  .base-price-inline {
    display: flex;
    align-items: center;
  }

  .base-price-inline-ipt {
    width: 80px;
    margin: 0 5px;
  }

  .icon-plus {
    font-size: 26px;
    color: #2C5586;
    cursor: pointer;
  }

  .m-l-10 {
    margin-left: 10px;
  }

  .submit-btn {
    width: 80px;
    margin-top: 30px;
    margin-left: 20px;
    margin-bottom: 50px;
  }

  .align-right {
    text-align: right;
    margin: 0
  }

  .mr-10 {
    margin-right: 10px;
  }

  .picker-date {
    width: 175px !important;
  }

  .default-badge {
    height: 20px;
    padding: 0 8px;
    line-height: 20px;
    top: 20px;
    right: -22px;
    color: #fff;
    font-size: 12px;
    border-radius: 7px 7px 7px 0;
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0);
    z-index: 1;
    position: absolute;
    background: #ff4949;
    box-shadow: 2px 2px 0 rgba(255, 73, 73, .2);
    overflow: hidden;
  }
</style>
<style>
  .base-price-inline .el-input--medium .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
</style>
